<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详细笔记</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共的样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="./css/notes.css">



    <style>

    </style>
</head>

<body>
    <!-- 头部导航栏 -->
    <div class="topbar-wrapper">
        <div class="topbar clearfix">

            <!-- 左侧文字logo -->
            <div class="logo">
                <h1 id="logotitle">YaoYunYa</h1>
            </div>

            <!-- 右侧菜单 -->
            <ul class="right-menu" id="right-menu">
                <li><a class="ap" href="./index.html">首页
                    <p ></p>
                </a>
                </li>
                <li><a href="./schoolLife.html" class="ap">校园生活</a>
                    <p></p>
                </li>
                <li><a href="./interest.html" class="ap">兴趣&爱好</a>
                    <p></p>
                </li>
                <li><a href="./notes.html" class="ap">我的笔记</a>
                    <p class="active"></p>
                </li>
            </ul>

        </div>

    </div>


    <div class="title">

        <h2 style="text-align: center;">前端开发介绍和学习路线 <div class="chilun"></div></h2>
        <h3 style="color: white; font-size: 26px;">日期:2022.09.10 10:20:45</h3>
    </div>
    <div style="width: 80%;margin: 30px auto;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 20px;">
        <span style="font-size: 22px;">
            特点<br>
            一份全面的前端知识点大梳理和汇总<br>
            <br>
            分阶段学习，每个阶段给出学习目标<br>
            <br>
            使用符号对知识点的重要程度做了区分，按需学习<br>
            <br>
            知识点附有描述和资源链接<br>
            <br>
            提供大量优质学习资源<br>
            <br>
            符号表<br>
            可根据知识点前的符号按需选学，并获取知识点描述和学习资源。<br>
            <br>
            ⭐️ 必学（追求速成）<br>
            <br>
            ✅ 建议学（重要知识）<br>
            <br>
            ❗ 面试重点<br>
            <br>
            ❌ 一般没必要学习<br>
            <br>
            💬 描述<br>
            <br>
            📚 资源<br>
            <br>
            🎯 目标<br>

            一、前端入门<br>
💬 描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。
<br>
📚 资源<br>

freeCodecamp 在线编程：Learn to Code — For Free (freecodecamp.org)<br>

阿里云前端实战学习：前端开发学习路线（学+测） - 阿里云开发者社区

W3Cschool 编程入门实战：在线编程实战训练CodeCamp_w3cschool编程实战

pink老师前端入门教程：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

🎯 目标：了解和实践各语言的基础语法，并能使用开发工具来独立开发一个留言板网站。

⭐️ 开发工具
💬 描述：工欲善其事，必先利其器。

浏览器

⭐️ Chrome

✅ Edge

✅ Firefox

❌ Opera

Safari

编辑器

⭐️ VSCode

✅ WebStorm

Atom

⭐️ Sublime Text

HBuilder X

记事本

在线 IDE

文档笔记

✅ Markdown 语法

✅ Typora

在线笔记

语雀

腾讯文档

石墨文档

印象笔记

Mdnice

⭐️ HTML
💬 描述：用于定义一个网页结构的基本技术。

📚 资源：使用 HTML 组织网站内容 - 学习 Web 开发 | MDN

⭐️ 基本语法

⭐️ 标签

分区 div

标题 h1 ~ h6

段落 p

图像 img

列表 ul / ol

超链接 a

表单 form

表格 table

框架 iframe

⭐️ 属性

✅ HTML5 特性

localStorage

sessionStorage

❌ Web SQL

语义化标签

浏览器支持

多媒体标签

Canvas 画布

❌ 内联 SVG

本地存储

Web Workers

应用缓存（Cache Manifest）

无障碍

⭐️ CSS
💬 描述：层叠样式表，用于设计风格和布局。

📚 资源：CSS - 学习 Web 开发 | MDN

⭐️ 基本语法

⭐️ 引入方式

行内样式

内部样式表

外部样式表

⭐️ 选择器

后代选择器

子元素选择器

相邻兄弟选择器

通用选择器

标签选择器

id 选择器

class 选择器

属性选择器

派生选择器

组合选择器

伪选择器

选择器优先级

⭐️ 属性

px

em

rem

vw

vh

单位

背景

文本

字体

列表

表格

⭐️ 文档流

标准流

浮动流

定位流

⭐️ 内联元素 / 块状元素

⭐️ 盒子模型

content

padding

border

margin

⭐️ 浮动

设置浮动 float

清除浮动 clear

⭐️ 定位

static

absolute

fixed

relative

sticky

⭐️ 层叠规则

❗ BFC 和 IFC 机制

CSS3

媒体查询

Flex 布局

Grid 布局

瀑布流

⭐️ 响应式布局

动画

过渡

渐变

背景

边框

圆角

字体

2D / 3D 转换

⭐️ JavaScript
💬 描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。

📚 资源：JavaScript | MDN

⭐️ 基本语法

⭐️ 数据类型

对象 Object

数组 Array

函数 Function

字符串 String

数组 Number

布尔 Boolean

空值 Null

未定义 Undefined

Symbol

值类型

引用类型

✅ 数据类型转换

✅ 函数

⭐️ 全局调用

构造函数调用

⭐️ 函数方法调用

apply

call

⭐️ 概念

⭐️ 自定义函数

调用方式

✅❗ 闭包

✅ 对象

数字 Number

字符串 String 对象

日期 Date 对象

数组 Array

布尔 Boolean

算数 Math

概念

this

原型链和继承

常用对象

自定义对象

✅❗ 作用域（作用域链）

✅ BOM API

⭐️ DOM API

⭐️ JSON

⭐️ Ajax

✅ JavaScript 执行机制

✅ ES6+ 特性

💬 描述：新引入的 JavaScript 语法特性。

📚 资源：ES6 入门教程 ES6 入门教程

let 和 const

变量解构赋值

对象扩展和新增方法

Symbol

Set 和 Map 数据结构

⭐️❗ Promise & async / await 异步编程

Generator 函数异步编程
————————————————
版权声明：本文为CSDN博主「是浅栀吖」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45882139/article/details/119866469
           
        </span>
    </div>







    <!-- 版权 -->
    <div class="banquan">

        <p>Keep on going never give up.</p>
        <p>广西工业职业技术学院 软件2131</p>
        <p>廖钧涛 制作</p>



    </div>

</body>

</html>